<link rel="stylesheet" href="./container.css">
<div class="warning"><strong>Warning:</strong> Your browser does not support CSS container queries. Please open this
  demo in Chrome Canary with the experimental <i>#enable-container-queries</i> flag turned on.</div>
<div class="page-container">
  <div class="card-container card-1" data-size="0">
    <div class="card">
      <figure>
        <img src="http://static.libsyn.com/p/assets/9/8/1/c/981c2ef87dd4c9e7/TCP000_thumbnail_v3.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Preference Media Queries</h2>
          <span class="time">15:40</span>
        </div>

        <div class="notes">
          <p class="desc">In this episode we narrow our focus on user-preference-based media queries, which enable you
            to create personalized experiences based on your users custom settings and needs.</p>
          <div class="links">
            <h3>Links</h3>
            <ul>
              <li>Media Queries → <a href="#">http://goo.gle/2MhYfR2</a></li>
              <li>Scripting → <a href="#">http://goo.gle/2Mdan5E</a></li>
              <li>The 'display-mode' media feature → <a href="#">http://goo.gle/2NoFr3c</a></li>
              <li>Prefers-* Security and Privacy → <a href="#">http://goo.gle/3kfwUM0</a></li>
              <li>CSS Color Adjustment → <a href="#">http://goo.gle/3qLkduJ</a></li>
            </ul>
          </div>
        </div>

        <button>Download Episode</button>
      </div>
    </div>
  </div>
  <div class="card-container card-2" data-size="0">
    <div class="card">
      <figure>
        <img src="http://static.libsyn.com/p/assets/9/8/1/c/981c2ef87dd4c9e7/TCP000_thumbnail_v3.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Preference Media Queries</h2>
          <span class="time">15:40</span>
        </div>

        <div class="notes">
          <p class="desc">In this episode we narrow our focus on user-preference-based media queries, which enable you
            to create personalized experiences based on your users custom settings and needs.</p>
          <div class="links">
            <h3>Links</h3>
            <ul>
              <li>Media Queries → <a href="#">http://goo.gle/2MhYfR2</a></li>
              <li>Scripting → <a href="#">http://goo.gle/2Mdan5E</a></li>
              <li>The 'display-mode' media feature → <a href="#">http://goo.gle/2NoFr3c</a></li>
              <li>Prefers-* Security and Privacy → <a href="#">http://goo.gle/3kfwUM0</a></li>
              <li>CSS Color Adjustment → <a href="#">http://goo.gle/3qLkduJ</a></li>
            </ul>
          </div>
        </div>

        <button>Download Episode</button>
      </div>
    </div>
  </div>
</div>
<script>
  const setSizes = () => {
    const card1Width = document.querySelector('.card-1').clientWidth
    const card2Width = document.querySelector('.card-2').clientWidth

    document.querySelector('.card-1').setAttribute('data-size', `${card1Width} px`);
    document.querySelector('.card-2').setAttribute('data-size', `${card2Width} px`);
  }

  setSizes()

  window.onresize = setSizes
</script>